<template>
    <el-container>
        <el-main>
            <h5>我的收藏</h5>
            <el-empty description="无收藏记录 " v-show="dataList"></el-empty>
            <el-row v-model="products">
                <el-col :span="6" v-for="item in products" :key="item.id">
                    <el-card class="product-card" :id="item.id"
                             style="width: 130px">
                        <div class="info">
                            <el-image class="product-picture"
                                      :src="`http://127.0.0.1:8081/product/${item.product.picture }`" @click="handClick(item.product.id)"></el-image>
                            <div>
                                <el-text type="info" truncated style="display:none;">
                                    {{ item.product.id }}
                                </el-text>
                            </div>
                            <div>
                                <el-text type="info" truncated>{{ item.product.title }}</el-text>
                            </div>
                            <div>
                                <el-space>
                                    <el-text type="danger">￥{{ item.product.new_price }}</el-text>
                                </el-space>
                            </div>
                            <div style="margin-top: 5px">
                                <el-button @click="removeCollect(item.id)">移除收藏</el-button>
                            </div>
                        </div>
                    </el-card>

                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>
<script setup>
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'

import {onMounted, ref, reactive, toRaw} from 'vue'
import {ElMessageBox, ElTable} from 'element-plus'
import goodApi from '../../api/goods.js'
import axios from 'axios'
import router from '../../router'
import {ElMessage} from "element-plus";

onMounted(()=>{
    collect()
})
const dataList = ref(true)
const products = ref([])
const collect = ()=>{
    axios.get('http://127.0.0.1:8080/collect/queryByUid').then(res => {
        products.value = res.data
        if(res.data.length == 0){
            dataList.value = true
        }
        if(res.data.length != 0){
            dataList.value = false
        }
        console.log(res.data)
    }).catch(error => {
        console.log(error)
    })
}

const removeCollect=(value)=>{
    axios.delete('http://127.0.0.1:8080/collect/delete/'+value).then(res => {
        collect();

    }).catch(error => {
        console.log(error)
    })
}



const handClick = (id) => {
    console.log(id)
    router.push({
        path: '/detail',
        query: {
            pid: id
        }
    })
}
</script>
<style scoped>

</style>